<div class="row">
    <div class="col-lg-3 col-xs-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-info pull-right">今日</span>
                <h5>新增用户</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">{$DATA.newUser.num ?? 0}</h1>
                {if condition = "$DATA.newUser.cp egt 0"}
                <div class="stat-percent font-bold text-info">{$DATA.newUser.cp ?? '0%'}<i class="fa fa-level-up"></i>
                </div>
                {else /}
                <div class="stat-percent font-bold text-danger">{$DATA.newUser.cp ?? '0%'}<i
                        class="fa fa-level-down"></i></div>
                {/if}
                <small>比昨日增加</small>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-success pull-right">数量</span>
                <h5>总用户数</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">{$DATA.allUser.num ?? 0}</h1>
                <div class="stat-percent font-bold text-success"> {$DATA.allUser.cp ?? '0%'} <i class="fa fa-bolt"></i>
                </div>
                <small>平均增长</small>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-primary pull-right">次数</span>
                <h5>转发次数</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">{$DATA.shareTime.num ?? 0}</h1>
                {if condition = "$DATA.shareTime.cp egt 0"}
                <div class="stat-percent font-bold text-navy">{$DATA.shareTime.cp ?? '0%'} <i
                        class="fa fa-level-up"></i></div>
                {else /}
                <div class="stat-percent font-bold text-danger">{$DATA.shareTime.cp ?? '0%'} <i
                        class="fa fa-level-down"></i></div>
                {/if}
                <small>比昨日增加</small>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-xs-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <span class="label label-success pull-right">人次</span>
                <h5>转发人数</h5>
            </div>
            <div class="ibox-content">
                <h1 class="no-margins">{$DATA.sharePeople.num ?? 0}</h1>
                {if condition = "$DATA.sharePeople.cp egt 0"}
                <div class="stat-percent font-bold text-navy">{$DATA.sharePeople.cp ?? '0%'} <i
                        class="fa fa-level-up"></i></div>
                {else /}
                <div class="stat-percent font-bold text-danger">{$DATA.sharePeople.cp ?? '0%'} <i
                        class="fa fa-level-down"></i></div>
                {/if}
                <small>比昨日增加</small>
            </div>
        </div>
    </div>
</div>

<div class="row">

    <div class="col-lg-4">
        <div class="ibox float-e-margins" id="Trend-data">
            <div class="ibox-title">
                <h5>访问趋势</h5>
                <div class="pull-right">
                    <div class="btn-group">
                        <button type="button" data-type="day" class="btn btn-xs btn-white">昨天</button>
                        <button type="button" data-type="week" class="btn btn-xs btn-white active">7天</button>
                        <button type="button" data-type="month" class="btn btn-xs btn-white">30天</button>
                    </div>
                </div>
            </div>
            <div class="ibox-content">
                <div class="row">
                    <div class="col-md-12">
                        <ul class="stat-list">
                            <li>
                                <div class="h2 no-margins text-right">
                                    <small class="pull-left">访问次数:</small>
                                    <span>{$DATA.trendDATA.open_time[0] ?? '0'}</span>
                                </div>
                                <small>对比上个时期</small>
                                <div class="stat-percent">
                                    <span>{$DATA.trendDATA.open_time[1]*10}%</span>
                                    {if $DATA.trendDATA.open_time[1]>0}
                                    <i class="fa fa-level-up text-navy"></i></div>
                                {elseif $DATA.trendDATA.open_time[1]<0}
                                <i class="fa fa-level-down text-danger"></i></div>
                    {else /}
                    <i class="fa fa-bolt text-info"></i></div>
                {/if}
                <div class="progress progress-mini">
                    <div style="width: {$DATA.trendDATA.stay_time[1]*10|abs}%;{$DATA.trendDATA.stay_time[1]>0 ? '':'background-color: #ed5664;'}" class="progress-bar"></div>
                </div>
                </li>
                <li>
                    <div class="h2 no-margins text-right">
                        <small class="pull-left">访问人数:</small>
                        <span>{$DATA.trendDATA.visit_people[0] ?? '0'}</span>
                    </div>
                    <small>对比上个时期</small>
                    <div class="stat-percent">
                        <span>{$DATA.trendDATA.visit_people[1]*10}%</span>
                        {if $DATA.trendDATA.visit_people[1]>0}
                        <i class="fa fa-level-up text-navy"></i></div>
                    {elseif $DATA.trendDATA.visit_people[1]<0}
                    <i class="fa fa-level-down text-danger"></i></div>
            {else /}
            <i class="fa fa-bolt text-info"></i></div>
        {/if}
        <div class="progress progress-mini">
            <div style="width: {$DATA.trendDATA.stay_time[1]*10|abs}%;{$DATA.trendDATA.stay_time[1]>0 ? '':'background-color: #ed5664;'}" class="progress-bar"></div>
        </div>
        </li>
        <li>
            <div class="h2 no-margins text-right">
                <small class="pull-left">新访问人数:</small>
                <span>{$DATA.trendDATA.visit_new_people[0] ?? '0'}</span>
            </div>
            <small>对比上个时期</small>
            <div class="stat-percent">
                <span>{$DATA.trendDATA.visit_new_people[1]*10}%</span>
                {if $DATA.trendDATA.visit_people[1]>0}
                <i class="fa fa-level-up text-navy"></i></div>
            {elseif $DATA.trendDATA.visit_people[1]<0}
            <i class="fa fa-level-down text-danger"></i></div>
    {else /}
    <i class="fa fa-bolt text-info"></i></div>
{/if}
<div class="progress progress-mini">
    <div style="width: {$DATA.trendDATA.stay_time[1]*10|abs}%;{$DATA.trendDATA.stay_time[1]>0 ? '':'background-color: #ed5664;'}" class="progress-bar"></div>
</div>
</li>
<li>
    <div class="h2 no-margins text-right">
        <small class="pull-left">人均停留时间:</small>
        <span>{$DATA.trendDATA.stay_time[0] ?? '0'}</span>
    </div>
    <small>对比上个时期</small>
    <div class="stat-percent">
        <span>{$DATA.trendDATA.stay_time[1]*10}%</span>
        {if $DATA.trendDATA.visit_people[1]>0}
        <i class="fa fa-level-up text-navy"></i></div>
    {elseif $DATA.trendDATA.visit_people[1]<0}
    <i class="fa fa-level-down text-danger"></i></div>
    {else /}
    <i class="fa fa-bolt text-info"></i></div>
    {/if}
    <div class="progress progress-mini">
        <div style="width: {$DATA.trendDATA.stay_time[1]*10|abs}%;{$DATA.trendDATA.stay_time[1]>0 ? '':'background-color: #ed5664;'}" class="progress-bar"></div>
    </div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<div class="col-lg-8">
    <div class="ibox float-e-margins" id="serport-data">
        <div class="ibox-title">
            <h5>用户画像</h5>
            <div class="pull-right">
                <div class="btn-group">
                    <button type="button" data-type="day" class="btn btn-xs btn-white">昨天</button>
                    <button type="button" data-type="week" class="btn btn-xs btn-white active">7天</button>
                    <button type="button" data-type="month" class="btn btn-xs btn-white">30天</button>
                </div>
            </div>
            <div class="pull-right" style="margin-right: 15px">
                <div class="btn-group">
                    <button type="button" data-type="new" class="btn btn-xs btn-link">新增用户</button>
                    <button type="button" data-type="live" class="btn btn-xs btn-link active">活跃用户</button>
                </div>
            </div>
        </div>
        <div class="ibox-content" style="min-height:325px;">
            <div class="row">
                <div class="col-lg-8" style="padding: 2%;">
                    <h2>年龄分布</h2>
                    <div class="flot-chart">
                        <div class="flot-chart-content">
                            <!-- 用户年龄分布 -->
                        </div>
                    </div>
                </div>
                <div class="col-lg-4" style="padding: 2%;">
                    <h2>性别分布</h2>
                    <div class="flot-chart-pie-content">
                        <!-- 用户性别分布 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
